<template>
  <div id="container">
    <div class="top">
      <span>{{table.seat_id}}号桌订单列表</span>
      <span class="el-icon-close" @click="close"></span>
    </div>
    <ul class="order_list">
      <li class="thead">
        <p>菜名</p>
        <p>数量</p>
        <p>是否上菜</p>
      </li>
      <li class="tbody" v-for="item in orderDetails" :key="item.dish_name">
        <span>{{item.dish_name}}</span>
        <span>{{item.dish_count}}</span>
        <span>
          <el-switch
            :value="item.legend === '已上菜'"
            active-color="#13ce66"
            inactive-color="#7c7c7c"
            @change="changeLegend(item.table_num,item.dish_name)"
            :disabled="item.legend === '已上菜'"
            >
          </el-switch>
        </span>
      </li>
    </ul>
    <div class="bottom">
      <div class="details">
        <p>订单号：{{table.order_num}}</p>
        <p>下单时间：{{table.order_time}}</p>
        <p>共消费：<strong>{{totalConsumption}}</strong></p>
      </div>
      <div class="btn">
        <el-button type="warning" :disabled="value" @click="pay(table.seat_id)">结账</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderDetailAPI } from '@/api/getOrderDetailAPI.js'
import { getSeatInfoAPI } from '@/api/getSeatInfoAPI.js'
import { setOrderDetailAPI } from '@/api/setOrderDetailAPI.js'
import { removeOrderDetailAPI } from '@/api/removeOrderDetailAPI.js'
import { setSeatAPI } from '@/api/setSeatAPI.js'
export default {
  props: ['tableNum'],
  data () {
    return {
      isShow: false,
      orderDetails: [],
      table: {},
      totalConsumption: 0,
      avltimer: null
    }
  },
  methods: {
    async getOrderDetail () {
      const token = localStorage.getItem('token')
      const { data: res } = await getOrderDetailAPI(token)
      this.orderDetails = res.data.filter(item => item.table_num === this.tableNum).filter(item => item.is_selected === '1')
      this.totalConsumption = this.orderDetails.reduce(function (amt, item) {
        amt += item.unit_price * item.dish_count
        return amt
      }, 0)
      const isServe = this.orderDetails.find(item => item.legend === '待上菜')
      if (isServe) {
        this.value = true
      } else {
        this.value = false
      }
    },
    async getSeatInfo () {
      const token = localStorage.getItem('token')
      const { data: res } = await getSeatInfoAPI(token)
      this.table = res.data.find(item => item.seat_id === this.tableNum)
    },
    async changeLegend (tablenum, dishname) {
      const token = localStorage.getItem('token')
      const data = {
        table_num: tablenum,
        dish_name: dishname,
        legend: '已上菜'
      }
      await setOrderDetailAPI(token, data)
    },
    success () {
      this.$message({
        message: '结账成功',
        type: 'success'
      })
    },
    async pay (tablenum) {
      const token = localStorage.getItem('token')
      const data = {
        seat_id: tablenum,
        seat_legend: '空闲中',
        people_num: 0,
        legend_class: '',
        is_selected: 0,
        order_time: '',
        order_num: ''
      }
      await setSeatAPI(token, data)
      await removeOrderDetailAPI(token, tablenum)
      this.close()
      this.success()
    },
    close () {
      this.$emit('close', this.isShow)
    }
  },
  created () {
    this.avltimer = setInterval(() => {
      this.getOrderDetail()
      this.getSeatInfo()
    }, 50)
  },
  beforeDestroy () {
    clearInterval(this.avltimer)
    this.avltimer = null
  }
}
</script>

<style scoped lang="less">
#container {
  width: 450px;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  right: 0;
  top: 0;
  padding-right: 30px;
  cursor: default;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    span {
      color: rgb(230, 152, 8);
      font-size: 24px;
    }
    .el-icon-close {
      cursor: pointer;
      font-size: 20px;
    }
  }
  .order_list {
    margin-top: 30px;
    .thead,.tbody{
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3eded;
      p {
        font-weight: 700;
      }
      p ,span{
        display: block;
        width: 80px;
        height: 100%;
        color: rgb(124, 124, 124);
        font-size: 18px;
        line-height: 50px;
        text-align: center;
      }
      p:nth-child(1),span:nth-child(1) {
        width: 180px;
        text-align: left;
        overflow: hidden;
      }
    }
  }
  .bottom {
    margin-top: 50px;
    height: 90px;
    background-color: rgb(253, 253, 253);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .details {
      flex: 3;
      p {
       color: rgb(122, 122, 122);
       font-size: 16px;
       height: 20px;
       line-height: 20px;
       text-align: left;
       strong{
         font-size: 18px;
         color: orange;
       }
      }
      p:nth-child(3){
        margin-top:5px ;
      }
    }
    .btn {
      flex: 1;
      display: flex;
      justify-content: end;
      align-items: center;
    }
  }
}
</style>
